<template>
  <div class="theme-switcher">
    <h3>主题设置 - 单色</h3>

    <div class="setting-item">
      <span>主题色：</span>
      <el-color-picker
        v-model="themeColor"
        show-alpha
        @change="changeThemeColor"
      />
    </div>

    <div class="setting-item">
      <span>暗色模式：</span>
      <el-switch
        v-model="darkMode"
        @change="toggleDark"
      />
    </div>

    <div class="preset-colors">
      <span>预设主题：</span>
      <div class="color-list">
        <div
          v-for="color in presetColors"
          :key="color"
          class="color-item"
          :style="{ backgroundColor: color }"
          @click="setThemeColor(color)"
        />
      </div>
    </div>

    <div class="button-row">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

import { setThemeColor as changeElementTheme, toggleDarkMode } from '~theme/index.js'

const themeColor = ref('#409EFF')
const darkMode = ref(false)

const presetColors = [
  '#409EFF', // 默认蓝
  '#008000', // 绿色
  '#FF0000', // 红色
  '#FFA500', // 橙色
  '#800080', // 紫色
  '#FFC0CB', // 粉色
  '#000000'  // 黑色
]

const changeThemeColor = (color) => {
  changeElementTheme(color)
}

const toggleDark = (isDark) => {
  toggleDarkMode(isDark)
}

const setThemeColor = (color) => {
  themeColor.value = color
  changeThemeColor(color)
}

onMounted(() => {
  // 从 localStorage 获取保存的主题色
  const savedColor = localStorage.getItem('theme-color')
  if (savedColor) {
    themeColor.value = savedColor
  }

  // 从 localStorage 获取暗色模式设置
  darkMode.value = localStorage.getItem('dark-mode') === 'true'
})
</script>

<style scoped>
.theme-switcher {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
}

.setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.setting-item span {
  margin-right: 10px;
  font-size: 14px;
}

.preset-colors {
  display: flex;
  align-items: center;
}

.preset-colors span {
  margin-right: 10px;
  font-size: 14px;
}

.color-list {
  display: flex;
  gap: 8px;
}

.color-item {
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 50%;
  transition: transform 0.2s;
  cursor: pointer;
}

.color-item:hover {
  transform: scale(1.2);
}

.button-row {
  margin-top: 20px;
}
</style>
